<template>
  <div class="flex-fill height-inherit overflow-y-auto">

    <el-form
      ref="formRef"
      :model="api.detailState.form"
      class="mx-auto"
      label-width="100px"
      status-icon
      style="width: 400px"
    >

      <el-form-item
        label="公司"
      >
        {{ api.detailState.form.company?.name }}
      </el-form-item>
      <el-form-item
        label="组织机构"
      >
        {{ api.detailState.form.org?.name }}
      </el-form-item>
      <el-form-item
        label="角色"
      >
        {{ api.detailState.form.role?.name }}
      </el-form-item>

      <el-form-item
        label="真实姓名"
        prop="realName"
      >
        <el-input
          v-model="api.detailState.form.realName"
          clearable
          placeholder="真实姓名"
        />
      </el-form-item>
      <el-form-item
        label="身份证号"
        prop="idCard"
      >
        <el-input
          v-model="api.detailState.form.idCard"
          clearable
          placeholder="身份证号"
        />
      </el-form-item>
      <el-form-item
        label="手机号"
        prop="phone"
      >
        <el-input
          v-model="api.detailState.form.phone"
          clearable
          placeholder="手机号"
        />
      </el-form-item>


      <el-form-item
        label="邮箱"
        prop="email"
      >
        <el-input
          v-model="api.detailState.form.email"
          clearable
          placeholder="邮箱"
        />
      </el-form-item>
      <el-form-item
        label="性别"
        prop="sex"
      >
        <i-attach-select
          v-model:model-value="api.detailState.form.sex"
          :params="{target:'GENDER_TYPE'}"
          auto-select
          class="fill-width"
        ></i-attach-select>
      </el-form-item>
      <el-form-item class="mb-0">
        <el-button :disabled="disabled.disabled" type="primary" @click="onSubmit">保存修改</el-button>
        <el-button :disabled="disabled.disabled" @click="onReset">取消</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script lang="ts" setup>
import { UserApi } from "~/api/system/user";
import { reactive, ref, watch } from "vue";


interface Props {
  api: UserApi;
}

const { api } = withDefaults(defineProps<Props>(), {});

const disabled = reactive({
  count: 0,
  disabled: true,
});

const formRef = ref();

async function onSubmit() {
  const values = await formRef.value.validate();
  if (values) {
    api.submit(api.detailState.form, false).then((res: any) => {
      if (res.ok) {
        onReset();
      }
    });
  }
}

function onReset() {
  disabled.count = 0;
  disabled.disabled = true;
  api.onDetail(<string>api.detailState.form.id);
}

watch(() => api.detailState.form.id, value => {
  if (value) {
    disabled.count++;
    if (disabled.count > 1) {
      disabled.disabled = false;
    }
  }
}, { deep: true, immediate: false });
</script>

<style lang="scss" scoped>

</style>
